<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="searchMap.where.name"
          placeholder="请输入品牌名称"
          clearable
          @click="search()"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="searchMap.where.showStatus"
          clearable
          placeholder="请选择状态"
        >
          <el-option
            v-for="(item, index) in brandstatueArry"
            :key="index"
            :label="item.lable1"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search()">查询</el-button>
        <el-button
          type="success"
          icon="el-icon-circle-plus-outline"
          @click="dialogFormVisible = true;entity={};title='添加品牌';imgURl=''"
          
          >添加</el-button
        >
      </el-form-item>
    </el-form>

    <el-table :data="brandlist" style="width: 100%">
      <el-table-column prop="name" label="品牌名称"> </el-table-column>
      <el-table-column prop="firstLetter" label="首字母"> </el-table-column>
      <el-table-column prop="logo" label="logo">
        <template slot-scope="scope">
          <div>
            <img
              :src="scope.row.logo"
              alt=""
              style="width: 80px; height: 40px"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="productCommentCount" label="评论数">
        <template slot-scope="scope">
          <div>
            {{ scope.row.productCount | nullFormat(source) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="productCount" label="产品数">
        <template slot-scope="scope">
          <div>
            {{ scope.row.productCount | nullFormat(source) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="showStatus" label="状态">
        <template slot-scope="scope">
          <div>
            <el-switch
              v-model="scope.row.showStatus"
              :change="changeshowStatue(scope.row.id, scope.row.showStatus)"
              :active-value="1"
              :inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180px;">
        <template slot-scope="scope">
          <el-button
            @click="updatebrand(scope.row)"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            >修改</el-button
          >
          <el-button
            @click="Idlist.push(scope.row.id),delbrand()"
            type="danger"
            size="mini"
            icon="el-icon-delete"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <span @click="(page = p), search()" 
    :key="index" 
    v-for="(p, index) in pages"
      >[{{ p }}]</span
    >
    <br />
    <!-- 显示页数导航 -->
    <div style="float: right">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchMap.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="searchMap.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <el-dialog title="添加品牌信息" :visible.sync="dialogFormVisible">
      <el-form :rules="rules">
        <el-form-item label="品牌名称" label-width="100px" prop="name" ref="ruleForm">
          <el-input v-model="brand.name" autocomplete="off"> </el-input>
        </el-form-item>
        <el-form-item label="首字母" label-width="100px" prop="title" ref="ruleForm">
          <el-input v-model="brand.firstLetter" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="logo" label-width="100px" prop="logo" ref="ruleForm">
          <!-- 上传图片 -->
          <el-upload
            action="http://localhost:8080/upload/imgUpload"
            list-type="picture-card"
            name="img"
            :limit="1"
            :on-success="handpicupload"
            :before-upload="beforeAvatarUpload"
            :auto-upload="true"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="handlePictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleDownload(file)"
                >
                  <i class="el-icon-download"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="handleRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save(ruleForm)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import {
  searchPage,
  addbrand,
  ChangeStatues,
  updateBrand,
  delBrand,
} from "@/api/goodbrands";
axios.defaults.baseURL = "http://localhost:8080";

//定义响应拦截器
axios.interceptors.response.use(function (res) {
  return res.data;
});

//定义axios请求拦截器
axios.interceptors.request.use(function (config) {
  config.headers.token = "xx";
  return config;
});
export default {
  data() {
    return {
      searchMap: {
        pageNum: 1,
        pageSize: 5,
        where: {
          firstLetter: "",
          id: 0,
          logo: "",
          name: "",
          productCommentCount: 0,
          productCount: 0,
          sort: 0,
        },
      },
      brandstatueArry: [
        { lable1: "禁用", value: 0 },
        { lable1: "启用", value: 1 },
      ],
      brandlist: [],
      dialogFormVisible: false,
      total: 0,
      brand: {
        firstLetter: "",
        logo: "",
        name: "",
      },
      Idlist:[],
      ruleForm:{
         name:"",
         title:"",
         logo:"",
      },
      rules: {
        name: [{ required: true, message: "请输入品牌名称", trigger: "blur" }],
        title: [
          { required: true, message: "请输入首字母", trigger: "blur" },
          { min: 1, max: 1, message: "必填", trigger: "blur" },
        ],
        logo: [{ required: true, message: "请上传图片", trigger: "blur" }],
      },
    };
  },
  methods: {
    search() {
      searchPage(this.searchMap).then((res) => {
        this.brandlist = res.data;
        this.total = res.totalSize;
      });
    },
    handleSizeChange(size) {
      this.searchMap.pageSize = size;
      this.search();
    },
    handleCurrentChange(page) {
      this.searchMap.pageNum = page;
      this.search();
    },
    // 修改状态
    changeshowStatue(id, showStatus) {
      // ChangeStatues(id, showStatus).then((res) => {
      //   this.$notify({
      //     title: res.success ? "成功" : "失败",
      //     message: res.msg,
      //     type: res.success ? "success" : "error",
      //   });
      //   this.search();
      // });
    },
    // 修改
    updatebrand(row) {
      this.dialogFormVisible = true;
      this.brand=JSON.parse(JSON.stringify(row));
      this.imgURl=row.logo;

    },
    // 删除
    delbrand() {
      delBrand(this.id).then((res) => {
        this.$notify({
          title: res.success ? "成功" : "失败",
          message: res.msg,
          type: res.success ? "success" : "error",
        });
        this.search();
      });
    },
    // 添加
    save() {
      if(!this.entity.id){//add
        addbrand(this.brand).then((res) => {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        this.$notify({
          title: res.success ? "成功" : "失败",
          message: res.msg,
          type: res.success ? "success" : "error",
        });
        this.dialogFormVisible = false;
        
        this.search();
      })
      }else{//update
        updateBrand(this.entity).then((res) => {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        this.$notify({
          title: res.success ? "成功" : "失败",
          message: res.msg,
          type: res.success ? "success" : "error",
        });
        this.dialogFormVisible = false;
        
        this.search();
        })
      }
    },
    //文件上传成功回调
    handpicupload(response, file, fileList) {
      console.log(response.data);
      this.brand.logo = response.data;
    
    },
    beforeAvatarUpload(file){
      
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  created() {
    this.search();
  },
};
</script>
